import useEmblaCarousel from 'embla-carousel-react';
import { usePrevNextButtons, PrevButton, NextButton } from '../ArrowButtons';

  const [emblaRef, emblaApi] = useEmblaCarousel({
    align: 'center',
    skipSnaps: false,
    containScroll: 'trimSnaps',
    startIndex: Math.floor(SIZE / 2),
  });
  
  const { prevBtnDisabled, nextBtnDisabled, onPrevButtonClick, onNextButtonClick } = usePrevNextButtons(emblaApi);
  
  
<div ref={emblaRef}>
    <div className="flex gap-x-4">
      {data?.map((item) => ())}
    </div>
</div>
          